<template>
	<div class='newsList'>
		<div class='list_content' v-if='newsListData.length'>
				<a :href='Path+item.url' class='list' v-for='(item, index) in newsListData' :key='index'>
				<div class='list_img_content'>
					<img class='list_img' :src='getImgPath(item.headImag)'/>
				</div>
				<div class='list_right'>
					<h4 class='list_title'>{{item.title}}</h4>
					<div class='list_right_bottom'>
						<div class='descripteAndDate'>
							<span class='list_descript'>搜狐新闻</span>
							<span class='list_date'>{{item.createTime}}</span>
						</div>
						<div class='comment_zan_store'>
							<span class='zan span'>
								<i class='iconfont icon-a-Thumbs-up1'></i>
								<span class='comment_zan_store_number'>{{setNumber(item.likes || 0)}}</span>
							</span>
							<span class='store span'>
								<i class='iconfont icon-a-Star1'></i>
								<span class='comment_zan_store_number'>{{setNumber(item.favorites || 0)}}</span>
							</span>
						</div>
					</div>
				</div>
			 </a>
		</div>
	</div>
</template>

<script>
	export default {
		props:{
			data:5,
			contentList:[],
		},
		data() {
			return {
				src:'../img/bg.jpg',
				newsListData:[],
				Path:getRootPath(),
				query:GetQueryString(),
			}
		},
		watch:{
			contentList:{
				handler(newVal, oldVal){
					if(newVal.length){
						this.newsListData = newVal;
					}
					
				},
				deep:true,
			},
		},
		created() {
		},
		mounted(){
			this.$nextTick(()=>{
					this.newsListData = this.contentList;
					
			})
		
			
		},
		methods:{
			setNumber(val){
			    return SetNumber(val);
			},
			getImgPath(url){
				return imgPath(url);
			},
		}
	}
	
</script>

<style>
.newsList {
  width: 100%;
  margin-bottom: 24px;
}
.newsList .list {
  display: flex;
  width: 100%;
  margin-bottom: 24px;
}
.newsList .list .list_img_content {
  width: 208px;
  height: 117px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.newsList .list .list_img_content .list_img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.newsList .list .list_img_content .list_img:hover {
  transform: scale(1.05);
}
.newsList .list .list_right {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  margin-left: 24px;
  width: 100%;
  flex: 1;
}
.newsList .list .list_right .list_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #333;
  font-weight: 500;
}
.newsList .list .list_right .list_title:hover {
  color: #FF3333;
}
.newsList .list .list_right .list_right_bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  color: #999;
}
.newsList .list .list_right .list_right_bottom .list_date {
  margin-left: 16px;
}
.newsList .list .list_right .list_right_bottom .span {
  margin-right: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}
.newsList .list .list_right .list_right_bottom .span .comment_zan_store_number {
  margin-left: 4px;
}
.comment_zan_store {
  display: flex;
  align-items: center;
}
.comment_zan_store .comment:hover{
	color: #FF3333;
}
</style>
